<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-area">
				<u-toast ref="uToast"></u-toast>
				<view class="pre-box" v-if="true">
					<view class="pre-item">
						<image class="pre-item-image" :src="avatar" mode="aspectFill"></image>
						<view class="u-delete-icon" @tap.stop="deleteItem(index)">
							<u-icon name="close" size="20" color="#ffffff"></u-icon>
						</view>
						<u-line-progress v-if="item.progress > 0 && !item.error" :show-percent="false" height="16" class="u-progress"
						 :percent="item.progress"></u-line-progress>
					</view>
				</view>
				<!-- 上传组件 -->
				<u-upload :header='header' :before-remove="beforeRemove" ref="uUpload"
				     @on-choose-complete='onchoosecomplete'
					@on-success="onSuccess" :custom-btn="true" :show-upload-list="true" :auto-upload="true" 
					:action="action" :show-progress="true" :deletable="true" :max-count="1"
					>
					<view v-if="lists" slot="addBtn" class="slot-btn" 
						hover-stay-time="150">
					</view>
				</u-upload>
				<u-button class="btn-waring" v-if="!lists.length" @click="preAvatar">查看图片</u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'https://api.php800.cn/weilai/api/common/filesUpload.php',//上传图片处理地址
				// 预置上传列表
				fileList: [],
				lists: [], // 组件内部的文件列表
				header: {
					'phone': uni.getStorageSync('phone'),
					'token': uni.getStorageSync('token')
				},
				avatar:''
			}
		},
		created() {
			this.avatar=JSON.parse(uni.getStorageSync('myMsg')).avatar //我的头像
		},
		methods: {
			reUpload() {
				this.$refs.uUpload.reUpload();
			},
	
			upload() {
				this.$refs.uUpload.upload();
			},
			deleteItem(index) {
				this.$refs.uUpload.remove(index);//删除选择好的图片
			},
			onchoosecomplete(data,html){
				
			},
			onSuccess(data, index, lists) {//上传成功的回调
			this.$u.vuex('vuex_avatar',data.data.url)
			this.avatar=data.data.url
			},
			beforeRemove(index, lists) {
				return true;
			},
			preAvatar() {//全屏阅览图片
				wx.previewImage({
					current: '', // 当前显示图片的 http 链接
					urls: [this.avatar] // 需要预览的图片 http 链接列表
				})
			},
		}
	}
</script>

<style lang="scss">
	.u-demo-wrap {
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		position: relative;
	}
	view[class^='u-list-item']{
		margin-left: 50rpx !important;
		display: none !important;
	}
	/deep/ .slot-btn {
		width: 150rpx;
		height: 150rpx;
		display: block;
		margin: 0 35px;
		position: absolute;
		top: 20px;
	}
.btn-waring{
	width: 300rpx;
	height: 80rpx;
	display: block;
	margin-top: 15rpx;
	font-size: 30rpx;
}
.pre-item-image{
	width: 150rpx;
	height: 150rpx;
	display: block;
	margin: 0 35px;
	border-radius: 50%;
	border: 1px solid #ccc;
}
	
</style>

